<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>默认统计页</title>
    <script th:src="@{/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/macarons.js}"></script>
</head>
<body>
<!--统计数据-->
<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="grid-demo" style="background-color: red">1/4</div>
    </div>
    <div class="layui-col-md3">
        <div class="grid-demo" style="background-color: red">1/4</div>
    </div>
    <div class="layui-col-md3">
        <div class="grid-demo" style="background-color: red">1/4</div>
    </div>
    <div class="layui-col-md3">
        <div class="grid-demo" style="background-color: red">1/4</div>
    </div>
</div>
<!--统计图-->
<div >
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
            <div id="left" style="width: 430px;height:450px;"></div>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div id="xxx" style="width: 430px;height:450px;"></div>
    </div>
</div>

</body>
<script type="text/javascript">
    layui.use(['jquery'], function () {
        var $=layui.jquery;
        $.ajax({
            url: "/count/getCountUserByDept",
            type: "GET",
            dataType: "JSON",
            success: function (data) {
                if (data.code == 0) {
                    //获取横坐标
                    var deptNames=data.data.deptNames;
                    //获取y坐标1
                    var nums=data.data.nums;

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('left'),'macarons');

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '部门员工数量统计',
                            subtext: '部门人数'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['人数']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: deptNames
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '员工数量',
                                type: 'bar',
                                data: nums,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }

        });







    });

</script>
</html>